<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            /* display: none;隐藏元素，但并没有消失，原位置不保留 */
            /* display: block;  显示隐藏元素 */
            /* display: none; */
            /* visibility: hidden;隐藏之后继续占有原来的位置 */
            /* visibility: visible;与之相对应 */
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .box3 {
            /* 隐藏溢出元素，overflow: visible;与之对应 */
            /* overflow: hidden; */
            /* 无论需不需要均显示滚动条 */
            /* overflow: scroll; */
            /* 需要时才显示滚动条 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        小猪佩奇是一只可爱的粉色小猪，她与弟弟乔治、爸爸、妈妈快乐地住在一起。小猪佩奇最喜欢做的事情是玩游戏，打扮的漂漂亮亮，度假，以及住在小泥坑里快乐的跳上跳下。除了这些，她还喜欢到处探险，虽然有些时候会遇到一些小状况，但总可以化险为夷，而且都会带给大家意外的惊喜
    </div>
</body>
</html>